<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘抢购</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>


    <div class="nav btn clearfix">
        <a href=""><img src="tqg.png" alt=""></a>
        <div class="r">
            <button id="btn">换一换</button>
            <span>更多 ></span>
        </div>

        <div class="s">
            <span class="shijian">距结束</span>
            <span class="bian"><span class="hour">00</span> :
            <span class="min" id="min"></span> :
            <span class="miao" id="miao"></span></span>
        </div>

    </div>




    <div class="nav" id="list"></div>


    <script>


        //倒计时代码
        var daoji = document.querySelector(".qiang-nr .shijian .bian .min")
        var daoj = document.querySelector(".qiang-nr .shijian .bian .miao")
        var min = 14;
        var miao = 60;
        setInterval(function () {
            miao--;
            if (miao < 10) {
                miao = "0" + miao
            }
            document.getElementById("miao").innerHTML = miao;
            if (miao == 00) {
                miao = 60;
                min--;
                if (min < 10) {
                    min = "0" + min
                }
                if (min == 0) {
                    min = 14;
                }
            }
            document.getElementById("min").innerHTML = min;
        }, 1000)
        var page = 1;





        //换一换代码
        //初始值
        var page = 1;

        //给换一换加点击事件
        document.querySelector("#btn").addEventListener('click',function () {
            //让page加1
            page++;

            if (page == 4){
                page = 1;
            }
            //解决追加问题
            document.querySelector("#list").innerHTML = "";
            //执行ajax方法
            loadXMLDoc()

        })

        function loadXMLDoc() {
            var xmlhttp;
            if (window.XMLHttpRequest)
            {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    var json = xmlhttp.responseText;
                    //把获取到的数据，转成数组对象格式的，方便js操作
                    json = JSON.parse(json);
                    for (let i = 0; i < json.shop.length; i++){
                        console.log(json.shop[i])
                        //创建节点
                        var img = document.createElement('img');
                        img.src = json.shop[i].pic;
                        img.className="tu"


                        //创建h3节点
                        var h3 = document.createElement('h3');
                        h3.innerHTML = json.shop[i].title;
                        h3.className="zi"


                        //
                        var h4 = document.createElement('h4');
                        h4.innerHTML = json.shop[i].p;
                        h4.className="title"


                        //创建p节点
                        var p = document.createElement("p");
                        p.innerHTML = json.shop[i].progress;
                        p.className="ppp"


                        var span1 = document.createElement("span");
                        span1.innerHTML = json.shop[i].percentage;
                        span1.className="percentage"


                        var span2 = document.createElement("span");
                        span2.innerHTML = json.shop[i].letter;
                        span2.className="letter"


                        var span3 = document.createElement("span");
                        span3.innerHTML = json.shop[i].extra;
                        span3.className="cur"

                        var span4 = document.createElement("span");
                        span4.innerHTML = json.shop[i].price;
                        span4.className="price"

                        var a = document.createElement("a");
                        a.setAttribute("href","#");



                        //创建div节点
                        var div =document.createElement('div');
                        var div1 =document.createElement('div');
                        var div2 =document.createElement('div');
                        var div3 =document.createElement('div');
                        div3.style.width = json.shop[i].c;



                        div.className="list"
                        div1.className="img-wrapper"
                        div2.className="info"
                        div3.className="bar"


                        //向div追加子标签
                        div.appendChild(div1)
                        div.appendChild(div2)
                        div1.appendChild(a)
                        a.appendChild(img)
                        div2.appendChild(h3)
                        div2.appendChild(h4)
                        div2.appendChild(p)
                        div2.appendChild(span1)
                        div2.appendChild(span2)
                        div2.appendChild(span3)
                        div2.appendChild(span4)
                        p.appendChild(div3)


                        console.log(div);


                        document.querySelector("#list").appendChild(div)
                    }

                    //document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET", page+ ".json",true);
            xmlhttp.send();
        }

        //执行一遍ajax方法
        loadXMLDoc()



    </script>


</body>
</html>